<template>
    <div>
        <h1>这是新闻页面</h1>
        <table class="table table-bordered">
            <tbody>
                <tr class="bg-primary" align="center">
                    <td>id</td>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>婚否</td>
                    <td>操作</td>
                </tr>
                <tr align="center" v-for="item in arr" :key="item.id">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.age }}</td>
                    <td>{{ item.marry }}</td>
                    <td>操作</td>
                </tr>
            </tbody>
        </table>
        <select>
            <option value="" >请选择</option>
            <option :value="item.id" v-for="item in city" :key="item.id" >{{ item.name }}</option>

        </select>

    </div>
</template>

<script setup lang="ts">
import { ref,reactive } from "vue";
let arr=reactive([
    {id:1,name:"曾庆优",age:20,marry:false},
    {id:2,name:"金友惠",age:18,marry:true},
    {id:3,name:"丁宏说",age:21,marry:false},
    {id:4,name:"牛逼",age:99,marry:false},
])

let city=reactive([
    {id:1,name:"河北"},
    {id:1,name:"山东"},
    {id:1,name:"山西"},
    {id:1,name:"河南"},
    {id:1,name:"日本"},

])
</script>

<style scoped>

</style>